<template>
    <div>

        <!-- 头部 -->
       <van-row>
          <van-col span="6">
                  <van-nav-bar
                  left-text="返回"
                  left-arrow
                  @click-left="exit"
                  />
            
                <van-popup v-model="show" position="left" :style="{ width: '80%' ,height:'100%'}">
            
                </van-popup>
          </van-col>
          <van-col span="12">
              <form action="/">
              <van-search
                v-model="value"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                @cancel="onCancel"
              />
            </form>
          </van-col>
          <van-col span="6">
            <van-cell title="..." @click="showShare = true" />
            <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
          </van-col>
        </van-row>


       <van-cell center title="老乡鸡" :border="false">
          <template #right-icon>
            <van-cell title="合肥市瑶海区777号" :value="checked ? '配送':'堂食'" :border="false" />
            <van-switch :value="checked" @input="onInput" />
          </template>
        </van-cell>

       
        <!-- 侧边导航栏 -->
        <van-row type="flex">
          <van-col span="8">
            <van-sidebar v-model="activeKey" @change="onChange">
              <van-sidebar-item title="凉菜" />
              <van-sidebar-item title="主食" />
              <van-sidebar-item title="饮料" />
              <van-sidebar-item title="酒类" />
              <van-sidebar-item title="茶" />
              <van-sidebar-item title="烧烤" />
              <van-sidebar-item title="徽菜" />
              <van-sidebar-item title="川菜" />
              <van-sidebar-item title="粤菜" />
            
            </van-sidebar>
          </van-col>
          <van-col span="16">

    
              <van-list>
   
                <van-card v-for="(item,index) in list" :key="index" 
                  :price="item.price"
                  desc="物美价廉"
                  :title="item.name"
                  :thumb="imgurl+item.image"
           
                  >
                <template #footer>
                  <van-button size="mini" @click="choice(item.price,item.name,item.image)">选择</van-button>

                </template>
                </van-card>

              </van-list>

          </van-col>
        
        </van-row>
   
      
        <van-submit-bar :price="sum" decimal-length="1" button-text="提交订单" @submit="onSubmit"  :safe-area-inset-bottom="true"/>
        


        <p>提交订单</p>
        <Footer></Footer>

    </div>
   
</template>

<script>
  import Footer from '../../components/Footer.vue'
  import { Dialog, Toast } from 'vant';
  import {getCategory,addOrderState,addOrder,getCategoryByFoodName} from '@/api/index'
  export default {
       components: { Footer},
       data() {
          return {
            checked: false,   //堂食或者配送
            activeKey: 0,        //食品内容
            list: [],
            imgurl:"http://162.14.107.118/image/food",
            foodList:[],
            food:"凉菜",
            bg: true,//点击选中变色
            sum:0,//共计
            foodOrder:[],//选中的订单

            // 以下数据是header头需要的
            value:'',
            show:false,
            activeNames: ['1'],
            showShare: false,
            options: [
              { name: '微信', icon: 'wechat' },
              { name: '微博', icon: 'weibo' },
              { name: '复制链接', icon: 'link' },
              { name: '分享海报', icon: 'poster' },
              { name: '二维码', icon: 'qrcode' },
            ],
          };
        },
        methods: {
          //切换就餐状态
          onInput(checked) {
            Dialog.confirm({
              title: '提醒',
              message: '是否切换为就餐状态？',
            }).then(() => {
              this.checked = checked;
            }).catch(()=>{
                    // console.log("取消切换");
              });
          },
          //切换菜品
          onChange(index) {
            //打印id
            // Toast(index);
            if(index==0)  
              this.food="凉菜"
            else if(index==1)
              this.food="主食"
            else if(index==2)
              this.food="饮料"
            else if(index==3)
              this.food="酒"
            else if(index==4)
              this.food="茶"
            else if(index==5)
              this.food="烧烤"
            else if(index==6)
              this.food="徽菜"
            else if(index==7)
              this.food="川菜"
            else if(index==8)
              this.food="粤菜"
            this.getFoodList()
          },
          //订单
          onSubmit(){
            //添加到订单表
            addOrder(this.foodOrder).then(res=>{

            })
            //添加到订单状态表
            let sum=0;
            this.foodOrder.forEach(item => {
              sum=sum+item.price
            });
            let username=localStorage.getItem("username")
            let q={}
            q["username"]=username
            q["sum"]=sum
            addOrderState(q).then(res=>{

            })

            let objData = JSON.stringify(this.foodOrder)
            this.$router.push({
                path: '/order',
                query:{allData: encodeURIComponent(objData)}
            })
          },
      
          
          //选中
          choice(price,name,image){
         

            price=price*100
            this.sum+=price;  
            image=this.imgurl+image;

            let op={}
            op["name"]=name
            op["price"]=price/100
            op["image"]=image

            // console.log(op);
            this.foodOrder.push(op)
            // console.log(this.foodOrder);
            // console.log(this.sum);
          },

 

          //获得菜品
          getFoodList(){
          
            getCategory(this.food).then(res=>{
              this.foodList=res.data.data
              this.list=this.foodList
     
              // console.log(this.foodList);
            })
          },

          //以下函数是header头需要的
          exit(){
                this.$router.go(-1)
            },
          //搜索 根据菜名搜索返回对应的类型
          onSearch(val) {
            let status
            let cat
            getCategoryByFoodName(val).then(res=>{
              cat=res.data.msg
              status=res.data.status
            
              if(cat=="凉菜")
                this.activeKey=0
              else if(cat=="主食")
                this.activeKey=1
              else if(cat=="饮料")
                this.activeKey=2
              else if(cat=="酒")
                this.activeKey=3
              else if(cat=="茶")
                this.activeKey=4
              else if(cat=="烧烤")
                this.activeKey=5
              else if(cat=="徽菜")
                this.activeKey=6
              else if(cat=="川菜")
                this.activeKey=7
              else if(cat=="粤菜")
                this.activeKey=8
            if(status)
              Toast(val+"查询成功")
            else 
              Toast(val+"查询失败")
            })
     
            
          },
          onCancel() {
            Toast('取消');
          },
          //弹出层
          showPopup() {
            this.show = true;
          },
          //分享
          onSelect(option) {
            Toast(option.name);
            this.showShare = false;
          },
        },
        mounted(){
          this.getFoodList()
        }
  }
</script>

<style>
  .back{
    background-color: antiquewhite;
  }
</style>